table {
  width: 100%;
  border: 1px solid $c-grey;
  border-collapse: separate;
  table-layout: fixed;

  i {
    color: $c-darker-grey;
  }
}

tbody {
  td {
    border-bottom: 1px solid $c-grey;

    &:first-child {
      border-left: 3px solid transparent; // this blends it in to the background
    }
  }

  tr {
    &:hover {
      td {
        &:first-child {
          border-left-color: var(--highlight-color);
        }
      }
    }

    &:nth-of-type(even) {
      td {
        background-color: $c-table-tr-even;
      }
    }

    &:last-child {
      td {
        border-bottom: 0;
      }
    }
  }
}

th,
td {
  vertical-align: middle;
  font-size: 13px;
  text-align: left;
  line-height: 1.2;
}

th {
  padding: 12px 10px;
  vertical-align: middle;
  font-weight: bold;
  color: $c-text-heavy;
  background: $c-table-th;
}

td {
  padding: 8px 10px;
  background-color: $c-table-td;
}
